:local(.spinnable) {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 100;
  touch-action: none;

  :local(.imagePlacer) {
    position: absolute;
    background: lightblue;
    z-index: 10;
    transform-origin: center center 0px;
    min-width: auto;
    min-height: auto;
    
    :local(.rotate) {

      :local(.dropElements) {
        z-index: 20;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 1px solid #d1d1d1;

        .grip {
          background-color: #fff;
          position: absolute;
          width: 9px;
          height: 9px;
          box-shadow: 0 1px 2px 0 rgba(0,0,0,.1);
          border: 1px solid #b3b3b3;

          &.tl {
            top: -5px;
            left: -5px;
            cursor: nw-resize;
          }

          &.tc {
            top: -5px;
            left: 50%;
            margin-left: -5px;
            cursor: nw-resize;
          }

          &.tr {
            top: -5px;
            right: -5px;
            cursor: ne-resize;
          }

          &.ml {
            top: 50%;
            margin-top: -5px;
            left: -5px;
            cursor: nw-resize;
          }

          &.mr {
            top: 50%;
            margin-top: -5px;
            right: -5px;
            cursor: nw-resize;
          }

          &.bl {
            bottom: -5px;
            left: -5px;
            cursor: sw-resize;
          }

          &.bc {
            bottom: -5px;
            left: 50%;
            margin-left: -5px;
            cursor: nw-resize;
          }

          &.br {
            bottom: -5px;
            right: -5px;
            cursor: se-resize;
          }
        }
      }
    }

    :local(.dropButtons) {
      z-index: 30;
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      background: 0 0;
      min-width: 200px;
      height: 70px;
      bottom: -65px;
      top: initial;
      left: 50%;
      right: initial;
      transform: translate(-50%,0);

      :local(.close) {
        color: #fff;
        background-color: #fff;
        cursor: pointer;
        display: inline-block;
        vertical-align: middle;
        font-weight: 700;
        text-align: center;
        border-radius: 8px;
        transition: .6s cubic-bezier(.165,.84,.44,1);
        border: 1px solid #E3E3E3;
        padding: 0 10px;
        line-height: 34px;
        height: 32px;
        margin-right: 10px;
      }
    }

  }
}